let shop = document.querySelector(".shop")
let uu = document.querySelector(".ul")
let u = document.querySelector(".u")
// div.isClick = false
$.ajax({
    url: "http://chst.vip:1234/api/getgsproduct?",
    data: {
        shopid: 0,
        areaid: 0
    }
}).then(res => {
    let html = ""
    console.log(res);
    res.result.forEach(item => {
        html += `<li>
        <a href="http://chst.vip:8081/mmb">
            <img src="${item.productImg}" alt="">
            <div>${item.productName}</div>
            <p>${item.productPrice}</p>
        </a>
    </li>`
    })
    u.innerHTML = html
})
shop.onclick = function () {
    // console.log(this)
    let shopDiv = this
    $.ajax({
        url: "http://chst.vip:1234/api/getgsshop",
    }).then(res => {
        let html = ""//页面结构
        res.result.forEach(item => {
            html += `<li shopId=${item.shopId}>${item.shopName}</li>`
        })
        uu.innerHTML = html
        //在此处添加进去的li点击事件

        let lis = document.querySelectorAll("li")
        Array.prototype.slice.call(lis).forEach(li => {
            li.onclick = function () {
                uu.style.display = "none"
                shopDiv.isClick = false
                shopDiv.innerText = "▲" + this.innerText
                let shopid = this.getAttribute("shopId")//
                // console.log(shopid)
                $.ajax({
                    url: "http://chst.vip:1234/api/getgsproduct?",
                    data: {
                        shopid,
                        areaid: 0
                    }
                }).then(res => {
                    let html = ""
                    console.log(res);
                    res.result.forEach(item => {
                        html += `<li>
                        <a href="http://chst.vip:8081">
                            <img src="${item.productImg}" alt="">
                            <div>${item.productName}</div>
                            <p>${item.productPrice}</p>
                        </a>
                    </li>`
                    })
                    u.innerHTML = html
                })
            }
        })

    })
    this.isClick = !this.isClick
    this.innerText = this.isClick ? "京东▼" : "京东▲"
    if (this.isClick) {
        uu.style.display = "block"
    } else {
        uu.style.display = "none"
    }


}
let place = document.querySelector(".place")

// div.isClick = false
place.onclick = function () {
    let shopDiv = this
    $.ajax({
        url: "http://chst.vip:1234/api/getgsshoparea",
    }).then(res => {
        // console.log(res);

        let html = ""
        res.result.forEach(item => {//对返回result的对象进行遍历渲染每个li
            html += `<li areaid=${item.areaId}>${item.areaName}</li>`

        })
        uu.innerHTML = html
        let lis = document.querySelectorAll("li")
        Array.prototype.slice.call(lis).forEach(li => {
            //给每个li添加点击事件
            li.onclick = function () {

                uu.style.display = "none"//点击li,大盒子隐藏
                shopDiv.isClick = false//第一次点击的this(shopDiv)，是未点击状态
                shopDiv.innerText = "▲" + this.innerText.substr(0, 2)//字符串裁剪前两个
                let areaid = this.getAttribute("areaid") //获取li便签属性目标
                console.log(areaid)//获取不到
                $.ajax({
                    url: "http://chst.vip:1234/api/getgsproduct?",
                    data: {
                        shopid: 0,
                        areaid,
                    }
                }).then(res => {
                    let html = ""
                    console.log(res);
                    res.result.forEach(item => {
                        html += `<li>
                        <a href="http://chst.vip:8081/mmb">
                            <img src="${item.productImg}" alt="">
                            <div>${item.productName}</div>
                            <p>${item.productPrice}</p>
                        </a>
                    </li>`
                    })
                    u.innerHTML = html
                })
            }
        })
    })

    this.isClick = !this.isClick
    this.innerText = this.isClick ? "华北▼" : "华北▲"
    if (this.isClick) {
        uu.style.display = "block"
    } else {
        uu.style.display = "none"
    }

}

